<template>
    <view v-if="range">
        <picker mode="multiSelector" :range="range" :range-key="name_key" :value="indexValues" @change="_bindchange"
            @columnchange="_bindcolumnchange" @cancel="_bindcancel">
            <slot></slot>
        </picker>
    </view>
</template>

<script>
    export default {
        name: "multi-select",
        data() {
            return {
                //picker's range property
                range: [],
                //每列选中的index
                indexValues: [],
            };
        },
        props: {
            // 嵌套数据 [obj,obj,obj] ; obj={id:xx,name:xx,children:[obj,obj]}
            items: {
                type: Array,
                default: []
            },
            // 主键字段名
            id_key: {
                type: String,
                default: "id"
            },
            // 显示字段名
            name_key: {
                type: String,
                default: "name"
            },
            // 子列表字段名
            children_key: {
                type: String,
                default: "children"
            },
            //最大层数
            max_level: {
                type: Number,
                default: 5
            },
            // 选中的最后一层obj.id, 以渲染picker的index
            value: {
                type: Number,
                default: null,
            },
        },
        watch: {
            items(items) {
                this._resetPickerRange();
                if (this.value) {
                    this._fireChangeEvent();
                }
            },
            value(newData, oldData) {
                if (newData !== oldData) {
                    this._fireChangeEvent();
                }
            },
        },
        created() {
            this._resetPickerRange();
        },
        methods: {
            _bindchange(event) {
                let component = this;
                component.originRange = Array.from(component.range);
                component.originIndexValues = Array.from(component.indexValues);
                this._fireChangeEvent();
            },
            _bindcancel(event) {
                let component = this;
                component.range = Array.from(component.originRange);
                component.indexValues = Array.from(component.originIndexValues);
                this.$emit("cancel");
            },
            _bindcolumnchange(event) {
                let component = this;
                let column = event.detail.column,
                    indexValue = event.detail.value;
                let list = component.range[column];
                // 修改indexValues值， 重新规划range
                let indexValues = component.indexValues,
                    range = component.range;
                indexValues[column] = indexValue;
                //清除column之后的indexValues, range， 对range[column].children递归出后续的range和index(默认0)
                range.splice(column + 1, 99);
                indexValues.splice(column + 1, 99);

                function recursiveSetZero(list, _currentLevel) {
                    if (_currentLevel > component.max_level) {
                        return;
                    }
                    indexValues.push(0);
                    range.push(list);
                    if (list[0] && list[0][component.children_key] && list[0][component.children_key]
                        .length > 0) {
                        recursiveSetZero(list[0][component.children_key], _currentLevel + 1);
                    }
                }
                if (range[column][indexValue][component.children_key] && range[column][indexValue][component
                        .children_key
                    ].length > 0) {
                    recursiveSetZero(range[column][indexValue][component.children_key], indexValues.length + 1);
                }
                component.range = range;
                component.indexValues = indexValues;
            },
            /**
             * 根据data.value的值整理picker的range 和 index value
             * @private
             **/
            _resetPickerRange: function() {
                let component = this;
                if (component.items.length === 0) {
                    return false;
                }
                let indexValues = [],
                    range = [];
                if (component.value) {
                    //从value向上追溯, 整理indexValues
                    let tempIndexValues = [],
                        tempRange = [];

                    function recursiveRead(list, currentLevel) {
                        if (currentLevel > component.max_level) {
                            //如果当前层数大于最大层数，返回
                            return false;
                        }
                        for (let index = 0; index < list.length; index++) {
                            let item = list[index];
                            let children = item[component.children_key];
                            if (children && children.length > 0) {
                                let ret = recursiveRead(children, currentLevel + 1);
                                if (ret) {
                                    tempIndexValues.push(index);
                                    tempRange.push(children);
                                    return true;
                                } else if (item[component.id_key] == component.value) {
                                    tempIndexValues.push(index);
                                    return true;
                                }
                            } else if (item[component.id_key] == component.value) {
                                tempIndexValues.push(index);
                                return true;
                            }
                        }
                        return false;
                    }
                    recursiveRead(component.items, 1);
                    if (tempIndexValues.length > 0) {
                        indexValues = tempIndexValues.reverse();
                        tempRange.push(component.items);
                        range = tempRange.reverse();
                    }
                }
                if (indexValues.length === 0) {
                    //全部默认选中index 0
                    function recursiveSetZero(list, currentLevel) {
                        if (currentLevel > component.max_level) {
                            //如果当前层数大于最大层数，返回
                            return false;
                        }
                        indexValues.push(0);
                        range.push(list);
                        if (list[0] && list[0][component.children_key] && list[0][component.children_key]
                            .length > 0) {
                            recursiveSetZero(list[0][component.children_key], currentLevel + 1);
                        }
                    }
                    recursiveSetZero(component.items, 1);
                }
                component.range = range;
                component.indexValues = indexValues;
                component.originRange = Array.from(range);
                component.originIndexValues = Array.from(indexValues);
            },
            _fireChangeEvent() {
                let component = this;
                let items = [],
                    indexValues = [];
                if (component.indexValues.length > 0) {
                    component.indexValues.forEach(function(item, index) {
                        items.push(component.range[index][item]);
                        indexValues.push(item);
                    });
                    this.$emit("change", {
                        items,
                        indexValues,
                    });
                }
            },
        },
    }
</script>

<style>

</style>
